<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<!-- 禁止移动端页面缩放 -->
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
	<!-- 阻止浏览器缓存页面内容 -->
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=8">
	<meta http-equiv="Expires" content="0">
	<meta http-equiv="Pragma" content="no-cache">
	<meta http-equiv="Cache-control" content="no-cache">
	<meta http-equiv="Cache" content="no-cache">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>首页-消息</title>
	<link rel="stylesheet" href="/stylesheets/main_bottom_line.css">
	<link rel="stylesheet" href="/stylesheets/root.css">
	<link rel="stylesheet" href="/stylesheets_copy/list_massage.css">
</head>

<body>
	<div class="fixed-top">
		<!-- 顶部栏 -->
		<div id="top">
			<h4>消息</h4>
			<img id="top_img1" src="/images/massage/shezhi.png" alt="图片找不到" />
			<img id="top_img2" src="/images/massage/sousuo.png" alt="图片找不到" />
		</div>

		<!-- 四个选项栏 -->
		<div id="option">
			<div class="options">
				<img src="/images/massage/fensishu.png" alt="图片找不到" />
				<p>官方消息</p>
			</div>
			<div class="options">
				<img src="/images/massage/aite.png" alt="图片找不到" />
				@我的
			</div>
			<div class="options">
				<img src="/images/massage/pinglun.png" alt="图片找不到" />
				评论
			</div>
			<div class="options">
				<img src="/images/massage/zan.png" alt="图片找不到" />
				赞
			</div>
		</div>
	</div>
	<!-- 消息列表 -->
	<div class="conteng_list">
		<!-- 消息内容 -->
		<div id="content">
			<a href="/webpage_copy/massage/massage-page.html">
				<div class="message">
					<div class="head"></div>
					<p class="title">陌生人消息</p>
					<p class="text">42354ssfdsefs</p>
					<p class="time">10:30</p>
				</div>
			</a>

			<div class="message">
				<div class="head"></div>
				<p class="title">1111</p>
				<p class="text">42354ssfdsefs</p>
				<p class="time">10:30</p>
			</div>
			<div class="message">
				<div class="head"></div>
				<p class="title">2222</p>
				<p class="text">42354ssfdsefs</p>
				<p class="time">10:30</p>
			</div>

			<div class="message">
				<div class="head"></div>
				<p class="title">3333</p>
				<p class="text">42354ssfdsefs</p>
				<p class="time">10:30</p>
			</div>
		</div>

	</div>

	<!-- 底部导航栏 -->
	<div class="bottom-line">
		<div class="bottom-line-box">
			<div class="page-main-page" data-jumpUrl="/main.html">
				<img src="/images/main/shouye.png" alt="">
				<p class="button_text">首页</p>
			</div>
			<div class="page-activity-page" data-jumpUrl="/webpage_copy/activity.html">
				<img src="/images/main/huodong.png" alt="">
				<p class="button_text">活动</p>
			</div>
			<div class="add-btn" data-jumpUrl="/forum/forum-edit.html">
				<img src="/images/main/jiahao.png" alt="">
			</div>
			<div class="page-message-page" data-jumpUrl="/webpage_copy/massage/list_massage.html">
				<img src="/images/main/xinxi.png" alt="">
				<p class="button_text">消息</p>
			</div>
			<div class="page-self-page" data-jumpUrl="/webpage_copy/my/my-updates.html">
				<img src="/images/main/wode.png" alt="">
				<p class="button_text">我的</p>
			</div>
		</div>
	</div>
	</div>
	<script>
		// 本脚本的功能是使底部导航栏点击跳转链接可以生效
		const box = document.querySelector('.bottom-line-box');
		for (let i = 0; i < box.children.length; i++) {
			let tmp = box.children[i];
			console.log(tmp.dataset.jumpurl);
			if (tmp.dataset.jumpurl != "") {
				let jmp_a = document.createElement('a');
				jmp_a.href = tmp.dataset.jumpurl;
				tmp.addEventListener('click', () => {
					console.log(jmp_a);
					jmp_a.click();
				});
			}
		}
	</script>
</body>

</html>